<template>
    <view class="viewport">
      <!-- 🔔 已登录的用户才能修改收货地址 -->
      <template v-if="userInfo">
        <!-- 操作列表 -->
        <view class="list">
          <navigator url="./address/index" hover-class="none" class="item arrow"
            >我的收货地址</navigator
          >
        </view>
        <view class="list">
          <navigator url="./account" hover-class="none" class="item arrow"
            >账户与安全</navigator
          >
        </view>
      </template>
      <view class="list">
        <button hover-class="none" class="item arrow" open-type="feedback">
          问题反馈
        </button>
        <button hover-class="none" class="item arrow" open-type="contact">
          联系我们
        </button>
        <navigator hover-class="none" url=" " class="item arrow"
          >关于小兔鲜儿</navigator
        >
      </view>
    </view>
  </template>
  
  <script>
  import { mapState } from "vuex";
  export default {
    computed: {
      ...mapState("user", ["userInfo"]),
    },
  };
  </script>
  
 
  <style lang="scss">
  page {
    background-color: #f4f4f4;
  }
  button {
    text-align: left;
    border-radius: 0;
    background-color: #fff;
    &::after {
      width: auto;
      height: auto;
      left: auto;
      border: none;
    }
  }
  .viewport {
    padding: 20rpx;
  }
  .arrow {
    &::after {
      position: absolute;
      top: 50%;
      content: "\e6c2";
      color: #ccc;
      font-family: "erabbit" !important;
      font-size: 32rpx;
      transform: translateY(-50%);
    }
  }
  .list {
    padding: 0 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    .item {
      line-height: 90rpx;
      padding-left: 10rpx;
      font-size: 30rpx;
      color: #333;
      border-top: 1rpx solid #ddd;
      position: relative;
      &:first-child {
        border: none;
      }
    }
  }
  .item {
    &::after {
      right: 5rpx;
    }
  }
  </style>
  